<div class="pannel-default">
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
        <nz-tab [nzTitle]="role.title">
            <nz-table #nzTable [nzData]="roleList" [nzLoading]="tableLoading">
                <thead>
                    <tr>
                        <th>{{'system.role.name'|translate}}</th>
                        <th>{{'system.role.memo'|translate}}</th>
                        <th>{{'system.role.createTime'|translate}}</th>
                        <th>{{'system.role.status'|translate}}</th>
                        <th>{{'cz.title'|translate}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of nzTable.data">
                        <td>{{ data.name | menuLanguage }}</td>
                        <td>{{ data.memo }}</td>
                        <td>{{ data.createTime }}</td>
                        <td><nz-tag *ngIf="data.status === 'Y'" [nzColor]="'#87d068'">{{'cz.enable'|translate}}</nz-tag><nz-tag *ngIf="data.status !== 'Y'" [nzColor]="'#f50'">{{'cz.disable'|translate}}</nz-tag></td>
                        <td><a style="margin-right:10px;">{{'cz.delete'|translate}}</a><a (click)="editRole(data)">{{'system.role.editBtn'|translate}}</a></td>
                    </tr>
                </tbody>
            </nz-table>
            <nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="role.add" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
                <form nz-form [formGroup]="validateForm">
                    <nz-form-item>
                        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">{{'system.role.name'|translate}}</nz-form-label>
						<nz-form-control [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.zh_CN_name">
                            <nz-input-group nzAddOnBefore="{{'chinese' | translate}}">
                                <input type="text" formControlName="zh_CN_name" nz-input placeholder="{{'placeholder.input'|translate}}{{'system.role.name'|translate}}" />
                            </nz-input-group>
                        </nz-form-control>
                        <nz-form-control nzOffset="6" [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.en_US_name">
                            <nz-input-group nzAddOnBefore="{{'english' | translate}}">
                                <input type="text" formControlName="en_US_name" nz-input placeholder="{{'placeholder.input'|translate}}{{'system.role.name'|translate}}" />
                            </nz-input-group>
                        </nz-form-control>
                        <nz-form-control nzOffset="6" [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.ja_JP_name">
                            <nz-input-group nzAddOnBefore="{{'japanese' | translate}}">
                                <input type="text" formControlName="ja_JP_name" nz-input placeholder="{{'placeholder.input'|translate}}{{'system.role.name'|translate}}" />
                            </nz-input-group>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="memo" nzRequired>{{'system.role.memo'|translate}}</nz-form-label>
                        <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('memo')">
                            <input nz-input id="memo" formControlName="memo" placeholder="{{'placeholder.input'|translate}}{{'system.role.memo'|translate}}" />
                        </nz-form-control>
                    </nz-form-item>
                </form>
            </nz-modal>
        </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
        <button nz-button nzType="primary" (click)="addRole()">{{'system.role.add'|translate}}</button>
    </ng-template>
</div>
